<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
    :width="props.width"
    class="my-dialog"
  >
    <template #header>
      <div class="dialog-header">{{ props.title }}</div>
    </template>
    <slot></slot>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, defineEmits, defineProps } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '操作',
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '50%',
  },
});

const emit = defineEmits(['update:modelValue', 'confirm']);
const visible = ref(props.modelValue);

// 监视 props 变化
watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal;
  }
);

const handleClose = () => {
  emit('update:modelValue', false);
};

const confirm = () => {
  emit('confirm');
};
</script>

<style scoped>
/* 添加自定义样式 */
.my-dialog {
  border-radius: 8px !important;
  max-height: 100px !important;
  overflow: auto !important;
}
.dialog-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  text-align: center;
}
</style>
